<template>
  <div>
    <div class="left">
      <!-- 左上办件统计 -->
      <div class="left-top">
        <el-card style="height: auto">
          <div class="left-top-float">
            <div class="topDiv">
              <table class="first-tab1">
                <div>
                  <div class="pic1"></div>
                  <div class="firstTxt1">100</div>
                  <div class="firstTxt11">总执法量</div>
                </div>
              </table>
            </div>
            <div class="topDiv">
              <table class="first-tab2">
                <div>
                  <div class="pic2"></div>
                  <div class="firstTxt2">100</div>
                  <div class="firstTxt22">周执法量</div>
                </div>
              </table>
            </div>
            <div class="topDiv">
              <table class="first-tab3">
                <div>
                  <div class="pic3"></div>
                  <div class="firstTxt3">100</div>
                  <div class="firstTxt33">月执法量</div>
                </div>
              </table>
            </div>
            <div class="topDiv">
              <table class="first-tab4">
                <div>
                  <div class="pic4"></div>
                  <div class="firstTxt4">100</div>
                  <div class="firstTxt44">年执法量</div>
                </div>
              </table>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 折线图统计、表格数据 -->
      <div class="left-center">
        <el-card>
          <div class="title-ft">
            <i class="el-icon-s-data title-icons"></i>流程对比
          </div>
          <div id="task" class="left" style="width: 100%; height: 400px"></div>

          <div class="title-ft">
            <i class="el-icon-s-promotion title-icons"></i>数据统计
          </div>
          <el-table :data="tableData.data" style="width: 100%; line-height: 60px"
            :default-sort="{prop: 'time', order: 'ascending'}">
            <el-table-column fixed label="序号" prop="time" align="center" width="140px">
            </el-table-column>
            <el-table-column label="关注量" align="center" width="150px" prop="a">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.a }}</span>
                <i :class="scope.row.followState" :id="scope.$index"></i>
              </template>
            </el-table-column>
            <el-table-column prop="b" label="增加量" align="center" width="150px"></el-table-column>
            <el-table-column prop="c" label="图文群发每日数据" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.c }}</span>
                <i :class="scope.row.massState"></i>
              </template>
            </el-table-column>
            <el-table-column prop="d" label="图文分析转发数据量" sortable align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.d }}</span>
                <i :class="scope.row.analysisState"></i>
              </template>
            </el-table-column>
            <el-table-column prop="e" label="回复用户消息次数" sortable align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.e }}</span>
                <i :class="scope.row.replyState"></i>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-footer style="text-align: left; margin-top: 10px">
              <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                  @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20]"
                  :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData.total"></el-pagination>
              </div>
            </el-footer> -->
        </el-card>
      </div>
    </div>
    <!-- 右边信息展示 -->
    <div class="right">
      <div class="right-top">
        <el-card>
          <div class="title-ft">
            <i class="el-icon-s-check title-icons"></i>政策法规
          </div>
          <div class="spli">
            <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
          </div>
        </el-card>
      </div>
      <div class="right-blo">
        <el-card>
          <div class="title-ft">
            <i class="el-icon-message-solid title-icons"></i>农房流转信息
          </div>
          <div>
            <div class="spli">
              <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <p class="timer">2020年10月14日</p>
              <el-divider></el-divider>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
  import HighCharts from "highcharts";
  export default {
    data() {
      return {
        tableData: {
          data: [{
              time: "2020-10-12",
              a: 2,
              b: 2,
              c: 3,
              d: 5,
              e: 6,
              followState: 'el-icon-top', //关注
              massState: 'el-icon-top', //图文群发
              analysisState: 'el-icon-top', //图文分析
              replyState: 'el-icon-top' //回复用户
            },
            {
              time: "2020-10-13",
              a: 5,
              b: 5,
              c: 4,
              d: 3,
              e: 4,
              followState: 'el-icon-top', //关注
              massState: 'el-icon-top', //图文群发
              analysisState: 'el-icon-top', //图文分析
              replyState: 'el-icon-top' //回复用户
            },
            {
              time: "2020-10-14",
              a: 4,
              b: 4,
              c: 5,
              d: 15,
              e: 21,
              followState: 'el-icon-top', //关注
              massState: 'el-icon-top', //图文群发
              analysisState: 'el-icon-top', //图文分析
              replyState: 'el-icon-top' //回复用户
            },
            {
              time: "2020-10-15",
              a: 7,
              b: 5,
              c: 12,
              d: 13,
              e: 12,
              followState: 'el-icon-top', //关注
              massState: 'el-icon-top', //图文群发
              analysisState: 'el-icon-top', //图文分析
              replyState: 'el-icon-top' //回复用户
            },
            {
              time: "2020-10-16",
              a: 8,
              b: 7,
              c: 13,
              d: 11,
              e: 15,
              followState: 'el-icon-top', //关注
              massState: 'el-icon-top', //图文群发
              analysisState: 'el-icon-top', //图文分析
              replyState: 'el-icon-top' //回复用户
            },
          ],
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        option: {
          legend: {
            align: "right",
            itemMarginTop: 0,
            verticalAlign: "top",
          },
          credits: {
            enabled: false
          },
          title: {
            text: "",
          },
          xAxis: {
            categories: [
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
              "数据填充",
            ],
            crosshair: true,
          },
          yAxis: {
            min: 0,
            title: {
              text: "",
            },
          },
          tooltip: {},
          plotOptions: {
            column: {
              borderWidth: 0,
            },
          },
          series: [{
              name: "审批归档",
              data: [12, 5, 7, 5, 14, 8, 23, 2, 12, 4, 15, 36],
              color: "#c000ff",
            },
            {
              name: "流转",
              data: [2, 3, 4, 4, 11, 8, 23, 12, 5, 4, 15, 14],
              color: "#ff6000",
            },
            {
              name: "执法",
              data: [23, 11, 13, 12, 14, 8, 11, 7, 12, 6, 9, 9],
              color: "#0000ff",
            },
          ],
        },
      };
    },
    created() {
      this.setStyle();
    },
    methods: {
      //行数据比较增长率
      setStyle() {
        for (let i = 0; i < this.tableData.data.length - 1; i++) {
          if (this.tableData.data[i].a > this.tableData.data[i + 1].a) {
            this.tableData.data[i + 1].followState = "el-icon-bottom";
          } else {
            this.tableData.data[i + 1].followState = "el-icon-top";
          }
          if (this.tableData.data[i].c > this.tableData.data[i + 1].c) {
            this.tableData.data[i + 1].massState = "el-icon-bottom";
          } else {
            this.tableData.data[i + 1].massState = "el-icon-top";
          }
          if (this.tableData.data[i].d > this.tableData.data[i + 1].d) {
            this.tableData.data[i + 1].analysisState = "el-icon-bottom";
          } else {
            this.tableData.data[i + 1].analysisState = "el-icon-top";
          }
          if (this.tableData.data[i].e > this.tableData.data[i + 1].e) {
            this.tableData.data[i + 1].replyState = "el-icon-bottom";
          } else {
            this.tableData.data[i + 1].replyState = "el-icon-top";
          }
        }
      },
      changePageSize(val) {
        this.temp_bussi.pageSize = val;
        this.getNeedDealPro();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      //折现图
      taskChart() {
        HighCharts.chart("task", this.option);
      }
    },
    mounted() {
      this.taskChart();
    },
  };
</script>

<style scoped>
  .head-card {
    height: 80px;
    background: linear-gradient(to left, #a866ff, #3a8ee6);
    text-align: right;
    color: ghostwhite;
  }

  /* 箭头样式 */
  .el-icon-top {
    color: limegreen;
    font-size: 20px;
    font-weight: bold;
  }

  .el-icon-bottom {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }

  #task {
    margin-bottom: 102px;
  }

  .left {
    padding-top: 20px;
    width: 70%;
    float: left;
  }

  .left-top {
    text-align: center;
    padding: 0;
    width: 98%;
    clear: both;
    height: auto;
  }

  .left-top-float {
    float: left;
    text-align: center;
    padding: 0;
    width: 100%;
    clear: both;
    height: auto;
  }

  .firstTxt1 {
    position: relative;
    width: 64px;
    height: 22px;
    font-family: FZCCHJW--GB1-0;
    font-size: 35px;
    color: #0c6cd5;
    top: -70px;
    left: 100px;
  }

  .firstTxt11 {
    position: relative;
    width: 64px;
    height: 22px;
    font-size: 16px;
    color: #333333;
    top: -50px;
    left: 100px;
  }

  .firstTxt2 {
    position: relative;
    width: 64px;
    height: 22px;
    font-family: FZCCHJW--GB1-0;
    font-size: 35px;
    color: #7930f0;
    top: -70px;
    left: 100px;
  }

  .firstTxt22 {
    position: relative;
    width: 64px;
    height: 22px;
    font-size: 16px;
    color: #333333;
    top: -50px;
    left: 100px;
  }

  .firstTxt3 {
    position: relative;
    width: 64px;
    height: 22px;
    font-family: FZCCHJW--GB1-0;
    font-size: 35px;
    color: #d5a60c;
    top: -70px;
    left: 100px;
  }

  .firstTxt33 {
    position: relative;
    width: 64px;
    height: 22px;
    font-size: 16px;
    color: #333333;
    top: -50px;
    left: 100px;
  }

  .firstTxt4 {
    position: relative;
    width: 64px;
    height: 22px;
    font-family: FZCCHJW--GB1-0;
    font-size: 35px;
    color: #e9530e;
    top: -70px;
    left: 100px;
  }

  .firstTxt44 {
    position: relative;
    width: 64px;
    height: 22px;
    font-size: 16px;
    color: #333333;
    top: -50px;
    left: 100px;
  }

  .first-tab1 {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 10px;
    border-radius: 10px;
  }

  .first-tab1:hover {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,
        rgba(147, 213, 243, 0) 0%,
        #396ffa 83%);
    color: white;
  }

  .first-tab2 {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 10px;
    border-radius: 10px;
  }

  .first-tab2:hover {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,
        rgba(214, 157, 247, 0) 0%,
        #a028f0 83%);
    color: white;
  }

  .first-tab3 {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 10px;
    border-radius: 10px;
  }

  .first-tab3:hover {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,
        rgba(247, 216, 157, 0) 0%,
        #f0bb28 83%);
    color: white;
  }

  .first-tab4 {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 10px;
    border-radius: 10px;
  }

  .first-tab4:hover {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,
        rgba(247, 193, 157, 0) 0%,
        #f17025 83%);
    color: white;
  }

  .topDiv {
    border: none;
    min-width: 160px;
    width: 23%;
    height: 110px;
    padding: 0;
    display: inline-block;
    _display: inline;
    *display: inline;
    zoom: 1;
    background: #fff;
  }

  .pic1 {
    width: 84px;
    height: 84px;
    background: url("~@/assets/img/index/dbsx.png");
  }

  .pic2 {
    width: 84px;
    height: 84px;
    background: url("~@/assets/img/index/week.png");
  }

  .pic3 {
    width: 84px;
    height: 84px;
    background: url("~@/assets/img/index/jjdq.png");
  }

  .pic4 {
    width: 84px;
    height: 84px;
    background: url("~@/assets/img/index/yqwb.png");
  }

  .left-center {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 40px;
    width: 98%;
    clear: both;
    height: auto;
  }

  .right {
    padding-top: 20px;
    width: 30%;
    float: left;
  }

  .right-top {
    height: auto;
  }

  .right-blo {
    height: auto;
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .title-ft {
    text-align: left;
    font-weight: 900;
    font-size: 18px;
    color: #48a2ff;
    margin: 2px 0 1% 2px;
    letter-spacing: 1px;
  }

  /* .title-ft1 {
    text-align: left;
    font-weight: 900;
    font-size: 18px;
    color: #48a2ff;
    padding-bottom: 35px; 
    margin: 2px 0 1% 2px;
    letter-spacing: 1px;
  } */
  .title-icons {
    margin-right: 2px;
    color: rgb(59, 106, 235);
  }

  .spli {
    text-align: left;
    font-weight: 900;
    font-size: 16px;
    margin: 20px 0 1% 2px;
    letter-spacing: 1px;
  }

  .timer {
    font-size: 10px;
    color: darkgray;
  }
</style>